<template>
    <div class="nav">
        <div class="painav">
            <div class="paitop-img">
                <img src="https://img.alicdn.com/tfs/TB1q_PvDNjaK1RjSZFAXXbdLFXa-927-147.png" title="寸金拍卖珍品"
                     width="309" height="49" style="display: block;margin: 0 auto;" alt="">
            </div>
            <div class="nav-con" style="height: 41px;">
                <div class="nav-wrap">
                    <div class="market-wrapper" @mouseover="cateNavShow = true">
                        <span class="market-name">
                            珍品主题市场
                            <!--分类类目 下拉按钮-->
                            <a class="btn-down-arrow">
                            <img src="https://img.alicdn.com/tfs/TB1ouKDCpzqK1RjSZFvXXcB7VXa-45-45.png" width="15"
                                 height="15" alt="">
                        </a>
                        </span>

                        <!--分类类目-->
                        <div v-show="cateNavShow || autoShowCateNav" class="pai-category-drop-nav"
                             @mouseout="cateNavShow = false">
                            <ul class="cate-con">
                                <li v-for="(item, index) in cateTreeData" :key="index"
                                    @mouseover="subCateNavData = item.children">
                                    <a class="cate" style="height: 32.333333333333336px" href="javascript:;"
                                       target="_blank">
                                        <span class="el-icon-s-cooperation"></span>
                                        <span class="name">{{item.label}}</span>
                                        <span class="el-icon-arrow-right"></span>
                                        <i class="space"></i>
                                    </a>
                                </li>
                                <!-- 子分类类目 -->
                                <li class="sub-cat-con" style="width:485px;">
                                    <ul class="sub-cat-list" v-for="(itemClild,index) in subCateNavData" :key="index">
                                        <li v-for="(subItem,idx) in itemClild" :key="idx">
                                            <a href="javascript:;" target="_blank" class="">{{subItem.label}}</a>
                                        </li>
                                    </ul>
                                    <dl class="sub-cat-agent">
                                        <dd>
                                            <a href="javascript:;">
                                                <img src="https://gw.alicdn.com/tfs/TB19ZepcSSD3KVjSZFKXXb10VXa-100-60.png"
                                                     alt="镇平县石佛寺玉器厂">
                                            </a>
                                        </dd>
                                        <dd>
                                            <a href="javascript:;" target="_blank">
                                                <img src="https://gw.alicdn.com/tfs/TB1Q8KxcGSs3KVjSZPiXXcsiVXa-100-60.jpg"
                                                     alt="苏州玉雕馆">
                                            </a>
                                        </dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <ul class="main-nav">
                        <li class="index" :class="{selected : selectedNum === 0}">
                            <router-link class="song-ti" :to="{ name: 'home'}">首页</router-link>
                        </li>
                        <li :class="{selected : selectedNum === 1}">
                            <router-link class="song-ti hot-nav" :to="{ name: 'pai-home'}">拍卖专场</router-link>
                            <img src="//gtms01.alicdn.com/tps/i1/TB12zErIFXXXXa3XpXXkSlfFpXX-20-13.gif"
                                 style="position: absolute;top: 10px;right:10px;" alt="new">
                        </li>
                        <li :class="{selected : selectedNum === 2}">
                            <el-tooltip content="该功能暂未开放" placement="top" effect="light">
                                <el-link :underline="false" class="song-ti" disabled>
                                    秒杀专场
                                </el-link>
                            </el-tooltip>
                        </li>
                        <li :class="{selected : selectedNum === 3}">
                            <el-tooltip content="该功能暂未开放" placement="top" effect="light">
                                <el-link :underline="false" class="song-ti" disabled>
                                    一口价专场
                                </el-link>
                            </el-tooltip>
                        </li>
                        <li class="">
                            <el-tooltip content="该功能暂未开放" placement="top" effect="light">
                                <el-link :underline="false" class="song-ti" disabled>
                                    机构入驻
                                </el-link>
                            </el-tooltip>
                        </li>

                    </ul>
                    <div class="p-search" id="J_Search"
                         style="width:268px;height:28px;margin-top:4px;background: url(https://img.alicdn.com/tfs/TB1d14byzDpK1RjSZFrXXa78VXa-804-84.png) no-repeat;background-size:cover;">

                        <form class="paimai-search-form" method="get" target="_blank">
                            <input id="J_SearchTxt" type="text" name="q" placeholder="用拍品名称搜索" maxlength="512">
                            <button class="search-btn" type="button" @click="$store.dispatch('invalidBtnAlertAction')">
                                搜索
                            </button>
                        </form>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Nav",
        data() {
            return {
                // 分类类目框框 显示隐藏
                cateNavShow: false,
                // 分类类目Tree数据
                cateTreeData: [
                    {
                        id: 1,
                        label: '玉翠珠宝',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 2,
                        label: '奢侈品',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 3,
                        label: '水墨篆刻',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 4,
                        label: '西画雕塑',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 5,
                        label: '紫砂陶瓷',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 6,
                        label: '工艺品',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 7,
                        label: '文玩收藏',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 8,
                        label: '汽车',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 9,
                        label: '房产',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 10,
                        label: '文创机构',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 11,
                        label: '茶酒滋补',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    },
                    {
                        id: 12,
                        label: '特色',
                        children: [
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                            [
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                                {id: 1, label: '和田玉把件'},
                            ],
                        ]
                    }],
                // 子分类类目 数据
                subCateNavData: [],
            }
        },
        props: {
            selectedNum: {type: Number, default: 0},
            autoShowCateNav: {type: Boolean, default: false},
        }
    }
</script>

<style scoped lang="less">
    * {
        font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }

    .painav {
        margin-top: 35px;
        background: url(https://img.alicdn.com/tfs/TB10TorygHqK1RjSZFPXXcwapXa-11-133.png) repeat-x;

        .paitop-img {
            width: 100%;
            height: 134px;
            padding-top: 35px;
            box-sizing: border-box;
        }

        .nav-con {
            position: relative;
            background-color: #f7f7f7;

            .nav-wrap {
                width: 1200px;
                height: 100%;
                margin: auto;

                .market-wrapper {
                    width: 120px;
                    line-height: 40px;
                    margin-right: 80px;
                    float: left;
                    position: relative;

                    .market-name {
                        margin-left: 14px;
                        display: inline-block;
                        color: #4a4a4a;
                        font-size: 14px;
                        font-weight: 700;

                    }

                    /*商品分类类目导航 下拉框*/

                    .btn-down-arrow {
                        top: 12px;
                        right: 0;
                        position: absolute;
                        cursor: pointer;
                    }

                    /*分类类目导航*/

                    .pai-category-drop-nav {
                        position: absolute;
                        height: 400px;
                        left: 0;
                        top: 41px;
                        min-width: 180px;
                        width: 180px;
                        overflow: visible;
                        z-index: 100;

                        ul.cate-con {
                            width: 190px;
                            height: 398px;
                            padding-top: 2px;
                            background-color: #c21f3a;
                            position: relative;

                            li {
                                a.cate {
                                    border-bottom: 1px solid #c62f48;
                                    position: relative;
                                    display: block;
                                    height: 32.333333333333336px;
                                    color: #666;
                                    text-decoration: none;

                                    /*左侧图标*/

                                    span:nth-child(1) {
                                        position: absolute;
                                        width: 15px;
                                        height: 15px;
                                        top: 10px;
                                        left: 15px;
                                        color: #ece2e3;
                                        font-size: 16px;
                                        -webkit-font-smoothing: antialiased;
                                        -webkit-text-stroke-width: .2px;
                                    }

                                    /*中部分类名称*/

                                    .name {
                                        position: absolute;
                                        top: 8px;
                                        color: #ece2e3;
                                        left: 42px;
                                        font-size: 14px;
                                        transition: all .1s linear;
                                    }

                                    /*右侧侧图标*/

                                    span:nth-child(3) {
                                        position: absolute;
                                        right: 9px;
                                        top: 10px;
                                        font-size: 14px;
                                        color: #ece2e3;
                                    }

                                    i.space {
                                        position: absolute;
                                        top: 0;
                                        right: -2px;
                                        width: 2px;
                                        height: 32px;
                                    }
                                }

                                a.cate:hover {
                                    cursor: pointer;
                                    background-color: #9b192e;

                                    .name {
                                        text-decoration: underline;
                                    }
                                }
                            }

                            /*鼠标挪到分类类目时  显示子分类菜单*/

                            li.sub-cat-con {
                                position: absolute;
                                top: 0;
                                left: 190px;
                                height: 398px;
                                width: 245px;
                                background: #fff;
                                z-index: 2;
                                border: 1px solid #dcdcdc;
                                border-left: none;
                                display: none;

                                ul.sub-cat-list {
                                    float: left;
                                    width: 120px;

                                    li {
                                        float: left;
                                        width: 100px;
                                        padding-left: 20px;
                                        margin-top: 20px;
                                        color: #4c4c4c;
                                        cursor: pointer;

                                        a {
                                            color: #4c4c4c;
                                            text-decoration: none;
                                        }

                                        a:hover {
                                            color: #fff;
                                            background-color: #9b192e;
                                        }
                                    }
                                }

                                /*子菜单分类最右侧图片*/

                                .sub-cat-agent {
                                    float: left;
                                    text-align: center;
                                    width: 124px;
                                    height: 100%;
                                    border-left: 1px solid #eaeaea;
                                    overflow: hidden;
                                }
                            }
                        }

                        ul.cate-con:hover {
                            li.sub-cat-con {
                                display: block;
                            }
                        }
                    }
                }

                .main-nav {
                    line-height: 40px;

                    li {
                        float: left;
                        position: relative;

                        a {
                            display: inline-block;
                            font-weight: 700;
                            padding: 0 27px;
                            line-height: 27px;
                            height: 27px;
                            font-size: 14px;
                            margin-right: 5px;
                            margin-top: 7px;
                            text-decoration: none;
                            color: #4a4a4a;
                            text-align: center;
                        }

                        a:hover {
                            line-height: 27px;
                            height: 27px;
                            text-align: center;
                            background-color: #c21f3a;
                            color: #fff;
                            border-radius: 17px;
                            padding: 0 27px;
                        }
                    }

                    li.selected {
                        a {
                            line-height: 27px;
                            height: 27px;
                            text-align: center;
                            background-color: #c21f3a;
                            color: #fff;
                            border-radius: 17px;
                            padding: 0 27px;
                        }
                    }
                }

                .p-search {
                    float: right;
                    line-height: 30px;
                    height: 30px;
                    width: 202px;

                    form {
                        display: block;
                    }

                    input {
                        border: none;
                        background: 0 0;
                        width: 174px;
                        height: 32px;
                        outline: none;
                        line-height: 16px;
                        vertical-align: middle;
                        color: #4a4a4a;
                        position: relative;
                        left: 30px;
                        top: -2px;
                        font-size: 12px;
                    }

                    #J_SearchTxt {
                        border-radius: 0;
                    }

                    .search-btn {
                        background: none;
                        border: none;
                        margin-top: -6px;
                        cursor: pointer;
                        width: 62px;
                        height: 28px;
                        line-height: 28px;
                        color: #fff;
                        font-size: 14px;
                        vertical-align: middle;
                        margin-left: 24px;
                        outline: none;
                    }
                }
            }
        }

    }
</style>